Refactor Highlight Animation in AreaTabs Component

- Updated highlight animation for newly added tabs to include a two-blink effect followed by a gradual fade-out.
- Adjusted timing for clearing highlights to ensure it occurs after the fade-out completes.
- Introduced a new background animation that stays visible during blinks and fades out slowly, enhancing visual feedback for users.

app/components/navigation/AreaTabs.vue

@@ -155,10 +155,13 @@ watch(visibleAreas, (newAreas, oldAreas) => {
       }, 300 + (index * 150)) // Stagger: 300ms, 450ms, 600ms, ...
     })
 
-    // Clear all highlights after animation
+    // Clear all highlights after animation completes (including fade-out)
-    setTimeout(() => {
+    // Animation timeline: glow+pulse 2x (~1.4s) + fade-out (0.6s) = 2.0s
-      newlyAddedAreaIds.value = []
+    // Wait 2.1s to ensure fade-out completes before removing class
-    }, 2000)
+    // TEMPORARILY DISABLED FOR TESTING
+    // setTimeout(() => {
+    //   newlyAddedAreaIds.value = []
+    // }, 2100)
   }
 
   previousAreaIds.value = newAreaIds
@@ -295,22 +298,35 @@ function setTabRef(areaId: string, el: any) {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Highlight animation for newly added tabs */
+/* Highlight animation for newly added tabs - 2x blink then stay transparent */
 @keyframes highlight-glow {
-
+  0% {
-  0%,
-  100% {
     box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
   }
 
+  /* First blink */
+  25% {
+    box-shadow: 0 0 20px 4px rgba(233, 30, 133, 0.6),
+      0 0 40px 8px rgba(201, 125, 255, 0.4);
+  }
+
   50% {
+    box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
+  }
+
+  /* Second blink */
+  75% {
     box-shadow: 0 0 20px 4px rgba(233, 30, 133, 0.6),
       0 0 40px 8px rgba(201, 125, 255, 0.4);
   }
+
+  /* Stay transparent after 2nd blink */
+  100% {
+    box-shadow: 0 0 0 0 rgba(233, 30, 133, 0);
+  }
 }
 
 @keyframes highlight-pulse {
-
   0%,
   100% {
     transform: scale(1);
@@ -321,9 +337,35 @@ function setTabRef(areaId: string, el: any) {
   }
 }
 
+/* Background gradient - stay visible during blinks, then fade out slowly */
+@keyframes highlight-background {
+  0% {
+    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+  }
+
+  /* Stay visible during first blink */
+  25% {
+    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+  }
+
+  /* Start fading slowly after first blink (over 1s instead of 0.5s) */
+  50% {
+    background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
+  }
+
+  /* Fade to transparent gradually */
+  100% {
+    background: transparent;
+  }
+}
+
 .tab-highlight {
-  animation: highlight-glow 1s ease-in-out 2,
+  /* Initial background state (will be animated) */
-    highlight-pulse 0.5s ease-in-out 2;
+  background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2));
-  background: linear-gradient(135deg, rgba(233, 30, 133, 0.2), rgba(201, 125, 255, 0.2)) !important;
+
+  /* Animations */
+  animation: highlight-glow 2s ease-in-out 1 forwards,
+    highlight-pulse 0.5s ease-in-out 2,
+    highlight-background 2s ease-in-out 1 forwards;
 }
 </style>