feat(popup): rework mark-as-read overlay animations

- Use ::after overlay + border-color fade for single/repo/all flows
- Defer DOM removal until API success with requestAnimationFrame guard
- Track and cancel stagger timeouts on rollback
- Fix clearNotificationCache() to clear both cached data and hash
- Remove slide-up/rollback dead code and SLIDE_UP constant

Author: euxx

src/lib/constants.js

@@ -16,7 +16,6 @@ export const MAX_POLL_INTERVAL_SECONDS = 600; // 10 minutes maximum (prevent exc
 // UI Animation Timings (milliseconds)
 export const ANIMATION_DURATION = {
   FADE_OUT: 200,
-  SLIDE_UP: 200,
   STAGGER_DELAY: 50,
   MIN_SPINNER_TIME: 500,
   STATUS_MESSAGE: 3000,

src/popup/notification-renderer.js

@@ -91,6 +91,7 @@ export function getCachedNotifications() {
  * Clear notification cache to force re-render
  */
 export function clearNotificationCache() {
+  cachedNotifications = null;
   cachedNotificationsHash = null;
 }
 
@@ -346,7 +347,7 @@ function createNotificationItem(notif, repoHeader, repoFullName, notifications)
     window.close();
   });
 
-  // Mark as read button with optimistic update
+  // Mark as read button with immediate visual feedback
   const markReadBtn = li.querySelector('.btn-mark-read');
   markReadBtn.addEventListener('click', async (e) => {
     e.stopPropagation();
@@ -360,70 +361,20 @@ function createNotificationItem(notif, repoHeader, repoFullName, notifications)
     markReadBtn.textContent = '✓';
 
     // Track user action
-    const animationDuration = ANIMATION_DURATION.FADE_OUT + ANIMATION_DURATION.SLIDE_UP;
+    const animationDuration = ANIMATION_DURATION.FADE_OUT;
     onUserAction(animationDuration);
 
+    // Force reflow so ::after pseudo-element starts at opacity 0
+    // eslint-disable-next-line no-unused-expressions
+    li.offsetHeight;
     li.classList.add('fade-out');
 
-    const originalParent = li.parentElement;
-    const originalNextSibling = li.nextSibling;
-
-    const slideUpTimeout = setTimeout(() => {
-      li.classList.add('slide-up');
-
-      const removeTimeout = setTimeout(() => {
-        li.remove();
-
-        // Check if any notifications from this group remain
-        const groupItems = notificationsList.querySelectorAll('.notification-item[data-id]');
-        let hasNotificationsInGroup = false;
-
-        for (const item of groupItems) {
-          const itemId = item.dataset.id;
-          const itemNotif = notifications.find((n) => n.id === itemId);
-          if (itemNotif && itemNotif.repository.full_name === repoFullName) {
-            hasNotificationsInGroup = true;
-            break;
-          }
-        }
-
-        if (!hasNotificationsInGroup && repoHeader) {
-          repoHeader.remove();
-        }
-
-        const remaining = notificationsList.querySelectorAll('.notification-item').length;
-        if (remaining === 0) {
-          emptyState.hidden = false;
-          markAllBtn.disabled = true;
-        }
-      }, ANIMATION_DURATION.SLIDE_UP);
-
-      li.dataset.removeTimeout = removeTimeout;
-    }, ANIMATION_DURATION.FADE_OUT);
-
-    li.dataset.slideUpTimeout = slideUpTimeout;
-
     // Restore the notification item to its original state on failure
     function restoreItem() {
-      clearTimeout(slideUpTimeout);
-      if (li.dataset.removeTimeout) {
-        clearTimeout(parseInt(li.dataset.removeTimeout));
-      }
-
-      li.classList.remove('marking-read', 'fade-out', 'slide-up');
+      li.classList.remove('marking-read', 'fade-out');
       markReadBtn.disabled = false;
       markReadBtn.textContent = '✓';
 
-      if (!li.parentElement) {
-        if (originalNextSibling && originalNextSibling.parentElement) {
-          originalParent.insertBefore(li, originalNextSibling);
-        } else {
-          originalParent.appendChild(li);
-        }
-        emptyState.hidden = true;
-        markAllBtn.disabled = false;
-      }
-
       li.style.backgroundColor = 'rgba(239, 68, 68, 0.1)';
       setTimeout(() => {
         li.style.backgroundColor = '';
@@ -433,7 +384,28 @@ function createNotificationItem(notif, repoHeader, repoFullName, notifications)
     try {
       const result = await sendMessage(MESSAGE_TYPES.MARK_AS_READ, { notificationId: notif.id });
 
-      if (!result.success) {
+      if (result.success) {
+        // Ensure at least one frame of the overlay animation is painted
+        await new Promise(requestAnimationFrame);
+
+        // Success: remove notification from DOM
+        li.remove();
+
+        // Check if any notifications from this group remain
+        const escapedRepo = CSS.escape(repoFullName);
+        const remainingInGroup = notificationsList.querySelectorAll(`.notification-item[data-repo="${escapedRepo}"]`);
+
+        if (remainingInGroup.length === 0 && repoHeader) {
+          repoHeader.remove();
+        }
+
+        const remaining = notificationsList.querySelectorAll('.notification-item').length;
+        if (remaining === 0) {
+          emptyState.hidden = false;
+          markAllBtn.disabled = true;
+        }
+      } else {
+        // Failure: restore item
         restoreItem();
       }
     } catch (error) {

src/popup/popup.css

@@ -532,36 +532,41 @@ body.dark-theme .pat-input.input-error {
 }
 
 /* Fade out animation for marking as read */
-.notification-item.marking-read {
+.notification-item.marking-read,
+.repo-group-header.marking-read {
   pointer-events: none;
+  transition: border-color 0.2s ease-out;
 }
 
-.notification-item.fade-out {
+.notification-item.fade-out,
+.repo-group-header.fade-out {
+  border-color: transparent;
+}
+
+/* Use overlay instead of opacity to avoid compositing artifacts in scroll containers */
+.notification-item.marking-read::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--bg-primary);
   opacity: 0;
-  transform: translateX(10px);
-  transition:
-    opacity 0.2s ease-out,
-    transform 0.2s ease-out;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
 }
 
-.notification-item.slide-up {
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  border-top-width: 0;
-  overflow: hidden;
-  transition:
-    max-height 0.2s ease-out,
-    padding 0.2s ease-out,
-    margin 0.2s ease-out,
-    border-top-width 0.2s ease-out;
+.repo-group-header.marking-read::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--bg-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
 }
 
-/* Smooth transitions for background color (error feedback) */
-.notification-item.rollback {
-  transition: background-color 0.3s ease-out;
+.notification-item.fade-out::after,
+.repo-group-header.fade-out::after {
+  opacity: 1;
 }
 
 .notification-item:hover {
@@ -599,10 +604,6 @@ body.dark-theme .pat-input.input-error {
   pointer-events: auto; /* Enable mouse interaction when visible */
 }
 
-.notification-item {
-  position: relative; /* Enable absolute positioning for child */
-}
-
 body.dark-theme .notification-hover-card {
   box-shadow:
     0 10px 15px -3px rgba(0, 0, 0, 0.3),